@mixin gen_row() {
  // 定义行布局的外部容器
  .cell-group {
    &.justify {
      .title {
        width: 60px; // 设置标题宽度
        text-align: justify;
        text-align-last: justify;
      }
    }
    &.align-left {
      .content {
        text-align: left; // 靠左对齐
      }
    }
    &.align-right {
      .content {
        text-align: right; // 靠右对齐
      }
    }
  }
  .cell {
    display: flex;
    align-items: center; // 垂直居中

    // 设置多个行布局的标题区域统一宽度
    .title {
      margin-right: 10px;
      position: relative;
    }
    .title::after {
      content: ':';
      display: block;
      position: absolute;
      top: 50%;
      right: -5px;
      transform: translate(0, -50%);
    }
    &.justify {
      .title {
        // @if $width {
        //   width: $width;
        // } @else {
        //   width: 60px; // 设置标题宽度
        // }
        width: 60px; // 设置标题宽度
        text-align: justify;
        text-align-last: justify;
      }
    }

    .content {
      // 右侧内容样式
      flex: 1; // 填充剩余空间
    }

    &.align-left {
      .content {
        text-align: left; // 靠左对齐
      }
    }
    &.align-right {
      .content {
        text-align: right; // 靠右对齐
      }
    }
  }
}
@include gen_row();
